<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="icon" href="common/images/logo.png" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="common/layui/css/layui.css" media="all" id="lightThem">
    <link rel="stylesheet" type="text/css" href="css/index.css" media="all" id="index_light">
    <link rel="stylesheet" type="text/css" href="common/global.css" media="all" id="global_light">
    <link rel="stylesheet" type="text/css" href="css/customer_list.css" media="all">
    <style>
        .body {
            background-color: #DCE3E6;
            padding: 0 10px 1.5vh 10px;
            font-family: HarmonyOS_Sans_SC_Regular;
        }
        .top{
            display: flex;
        }
        .top-left{
            width: 50%;
            background-color: #02a3c7;
            height: 180px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .top-right{
            width:50%;
            background-color: rgba(3, 123, 28, 0.85);
            margin-left: 8px;
        }
        .middle{
            display: flex;
            height: 70px;
        }
        .middle_item{
            width: 40%;
            height: 100px;
            margin-right: 8px;
            background-color: #FFFFFF;
            display: flex;
            justify-content: center !important;
            align-items: center;
        }
        .middle_item_content{
            display: flex;
            flex-direction: column;
            width: 30%;
            margin-left: 20px
        }
        .amount{
            font-weight: bolder;
            margin-right: 8px;
            font-size: 18px
        }
        .layui-card{
            margin: 0 7.5px;
        }
        .info_title{
            text-align: center;
            font-size: 26px;
            font-weight:lighter;
            margin: 20px auto;
        }
        .notice_content{
            padding: 10px 30px;
        }
    </style>
<body>
<div class="body">
    <div class="layui-row layui-col-space15" id="sum_info">
        <!-- 收入数据 -->
    </div>
    <div class="layui-row layui-col-space15" style="margin-top: 40px">
        <div class="layui-card">
            <div class="layui-card-header index_statistics_head">
                <span>销售数据</span>
                <div class="layui-tab layui-layout-right" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">近一周</li>
                        <li>近一月</li>
                    </ul>
                </div>
            </div>
            <div class="layui-card-body">
                <div id="bar" style="height: 380px;"></div>
            </div>
        </div>
    </div>
</div>
<script id="topSum" type="text/html">
    <div class="top">
        <div class="top-left" id="top-left">
            <img style="width: auto;height: 150px;margin-right: 48px;" src="./images/users.png">
            <div style="width: 70%">
                <div class="layui-row" style="display: flex;flex-direction: row;border-bottom: 2px solid #FFF;color: #FFF;margin-right: 25px">
                    <div class="layui-col-md5">
                        <span style="font-size: 14px">本年新增询价</span>
                        <div style="margin-bottom: 15px;">
                            <span style="font-weight: bolder;font-size: 35px;margin-right: 15px">{{d.year_inquiry_num}}</span>单
                        </div>
                    </div>
                    <div class="layui-col-md5">
                        <span style="font-size: 14px">本年成交订单</span>
                        <div style="margin-bottom: 15px;">
                            <span style="font-weight: bolder;font-size: 35px;margin-right: 15px">{{d.year_order_num}}</span>单
                        </div>
                    </div>
                </div>
                <div style="display: flex;color: #FFF">
                    <div style="display: flex;flex-direction: column;margin-right: 20px;" >
                        <span style="margin-top: 20px">应收金额</span>
                        <div style="margin-top: 8px">
                            <span class="amount">{{d.year_purchase_total_cost}}</span>元
                        </div>
                    </div>
                    <div style="display: flex;flex-direction: column;padding-right: 20px;">
                        <span style="margin-top: 20px">实收收金额</span>
                        <div style="margin-top: 8px">
                            <span class="amount">{{d.year_purchase_pay_cost}}</span>元
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="top-left top-right">
            <img style="width: auto;height: 150px;margin-right: 48px;" src="./images/shop.png">
            <div style="width: 70%">
                <div class="layui-row" style="display: flex;flex-direction: row;border-bottom: 2px solid #FFF;color: #FFF;margin-right: 25px">
                    <div class="layui-col-md5">
                        <span style="font-size: 14px">本月新增询价</span>
                        <div style="margin-bottom: 15px;">
                            <span style="font-weight: bolder;font-size: 35px;margin-right: 15px">{{d.month_inquiry_num}}</span>单
                        </div>
                    </div>
                    <div class="layui-col-md5">
                        <span style="font-size: 14px">本月成交订单</span>
                        <div style="margin-bottom: 15px;">
                            <span style="font-weight: bolder;font-size: 35px;margin-right: 15px">{{d.month_order_num}}</span>单
                        </div>
                    </div>
                </div>
                <div style="display: flex;color: #FFF">
                    <div style="display: flex;flex-direction: column;margin-right: 20px;" >
                        <span style="margin-top: 20px">应收金额</span>
                        <div style="margin-top: 8px">
                            <span class="amount">{{d.month_purchase_total_cost}}</span>元
                        </div>
                    </div>
                    <div style="display: flex;flex-direction: column;color: #FFF;padding-right: 20px;">
                        <span style="margin-top: 20px">实收收金额</span>
                        <div style="margin-top: 8px">
                            <span class="amount">{{d.month_purchase_pay_cost}}</span>元
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="middle" id="middle">
        <div class="middle_item">
            <img style="width: 53px;height: 58px;" src="./images/users.png">
            <div class="middle_item_content">
                <div style="display: flex;align-items: center;margin-right: 10px">
                    <a href="javascript:;" class="toInquiry" style="margin-right: 10px;font-weight: bolder;font-size: 24px"> {{d.today_inquiry_num}} </a>
                    <span> 个 </span>
                </div>
                <span style="color: #878787">待报价</span>
            </div>
        </div>
        <div class="middle_item">
            <img style="width: 53px;height: 58px;" src="./images/logistics.png">
            <div class="middle_item_content">
                <div style="display: flex;align-items: center;margin-right: 10px">
                    <a href="javascript:;" class="toInquiry" style="margin-right: 10px;font-weight: bolder;font-size: 24px"> {{d.today_bid_num}} </a>
                    <span> 个 </span>
                </div>
                <span style="color: #878787">投标中</span>
            </div>
        </div>
        <div class="middle_item">
            <img style="width: 53px;height: 58px;" src="./images/recharge.png">
            <div class="middle_item_content">
                <div style="display: flex;align-items: center;margin-right: 10px">
                    <a href="javascript:;" class="toInquiry" style="margin-right: 10px;font-weight: bolder;font-size: 24px"> {{d.today_returned_money}} </a>
                    <span> 元 </span>
                </div>
                <span style="color: #878787">今日收入</span>
            </div>
        </div>
        <div class="middle_item" style="margin-right: 0">
            <img style="width: 53px;height: 58px;" src="./images/shop.png">
            <div class="middle_item_content">
                <div style="display: flex;align-items: center;margin-right: 10px">
                    <a href="javascript:;" class="toInquiry" style="margin-right: 10px;font-weight: bolder;font-size: 24px"> {{d.today_return_num}} </a>
                    <span> 个 </span>
                </div>
                <span style="color: #878787">今日退件</span>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="showNoticeForm">
    <div class="layui-card-body" id="notice" style="align-items: center;text-align: center">
        <h3 class="info_title" id="notice_title">{{d.notice_title}}</h3>
        <p class="notice_content" id="content">{{d.content}}</p>
    </div>
</script>
<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.cookie.js"></script>
<script type="text/javascript" src="./common/layui/layui2.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<script type="text/javascript" src="./jsplug/echarts.js"></script>

<script type="text/javascript">
    layui.use(['jquery', 'laydate', 'form', 'table', 'element','laytpl', 'layer'], function() {
        var $ = layui.jquery;
        var table = layui.table;
        var element = layui.element;
        var laytpl = layui.laytpl;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;

        var bar = echarts.init(document.getElementById("bar"));
        var xdata = [];
        var returndata = [];
        var currentNoticeLayerIndices = []; // 用于存储所有当前打开的通知弹框的索引

        send_req('Common/getUserInfo.html', {}, function (user_data) {
            if (user_data.due_state && !user_data.user_state) {
                layer.open({
                    type: 1,
                    area: ['800px', '600px'],
                    offset: '65px',
                    title: '通知公告',
                    content: $('#showNoticeForm').html(),
                    success: function (layero, index) {
                        $(layero).children('.layui-layer-content').css('overflow', 'visible');
                        var content = user_data.due_state == 1 ? '您的账户即将到期，到期时间：' + user_data.due_time + '。' : '您的账户已于' + user_data.due_time + '到期！';
                        $('#notice_title').html('账户到期通知');
                        $('#content').html(content);
                        form.render();
                    },
                    end: function () { // 监听关闭事件
                        notice();
                    }
                })
            } else {
                notice();
            }
        });
        function notice(){
            send_req('Common/getUserNoticeMore', {}, function (data) {
                if(data.count > 0){
                    // 对于每条通知数据，调用showNoticePopup函数来显示弹框
                    data.data_list.forEach(function(notice) {
                        showNoticePopup(notice);
                    });
                }
            });
            /*send_req('Common/getUserNotice.html', {}, function (data) {
                if(data && !data.user_state){
                    layer.open({
                        type: 1,
                        area: ['800px','600px'],
                        offset: '65px',
                        title: '通知公告',
                        content: $('#showNoticeForm').html(),
                        success: function (layero, index) {
                            $(layero).children('.layui-layer-content').css('overflow', 'visible');
                            $('#notice_title').html(data.notice_title);
                            $('#content').html(data.content);
                            if(data.pic_urls.length>0){
                                for (var i=0; i<data.pic_urls.length;i++){
                                    $('#notice').append( '<div class="file-iteme">' +
                                        '<div class="handle" id='+i+'></div>' +
                                        '<img class="imgs" style="width: 400px;height: auto;" src='+ data.pic_urls[i] +'>' +
                                        '<div class="info"></div>' +
                                        '</div>');
                                }
                            }
                            form.render();
                        },
                        end: function(){ // 监听关闭事件

                        }
                    })
                }
            });*/
        }
        function showNoticePopup(data) {
            // 动态计算offset以避免弹框重叠
            var offsetTop = 65 + (currentNoticeLayerIndices.length * 20); // 假设每个弹框高度为600px，间距为20px

            // 打开新弹框并获取其索引
            var noticeLayerIndex = layer.open({
                type: 1,
                area: ['800px','600px'],
                offset: offsetTop + 'px',
                title: '通知公告',
                content: $('#showNoticeForm').html(),
                success: function (layero, index) {
                    // 将当前弹框的索引添加到数组中
                    currentNoticeLayerIndices.push(index);

                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    // 使用当前弹框上下文查找元素
                    $('#notice_title', layero).html(data.notice_title);
                    $('#content', layero).html(data.content);
                    if(data.pic_urls && data.pic_urls.length > 0){
                        for (var i = 0; i < data.pic_urls.length; i++) {
                            $('#notice', layero).append(
                                '<div class="file-iteme">' +
                                '<div class="handle" id='+i+'></div>' +
                                '<img class="imgs" style="width: 400px;height: auto;" src=' + data.pic_urls[i] + '>' +
                                '<div class="info"></div>' +
                                '</div>'
                            );
                        }
                    }
                },
                end: function(){ // 监听关闭事件
                    // 当弹框关闭时，从数组中移除对应的索引
                    var indexToRemove = currentNoticeLayerIndices.indexOf(noticeLayerIndex);
                    if(indexToRemove !== -1) {
                        currentNoticeLayerIndices.splice(indexToRemove, 1);
                    }
                }
            });
        }

        layer.load(2);
        send_req('Order/getOrderSum', {}, function (data) {
            layer.closeAll('loading');
            var detail = document.getElementById('topSum');
            var getLoadTpl = detail.innerHTML;
            var detailView = document.getElementById('sum_info');
            laytpl(getLoadTpl).render(data, function(html){
                detailView.innerHTML = html;
            });

            $('.toInquiry').on('click', function(event){
                event.preventDefault(); // 阻止默认行为
                // 在这里放置你想要执行的代码，比如：
                window.parent.go_to_page_general('./html/inquiry/index.html');
            });
        });
        //初始化折线图
        getHistogram();

        // 图
        element.on('tab(docDemoTabBrief)', function(data){
            var type = data.index;
            getHistogram(type);

        });
        // 柱状图
        function getHistogram(type=0){
            send_req('Order/getHistogram', {type:type}, function (data) {
                layer.closeAll('loading');
                xdata = data.xdata;
                returndata = data.order_return;
                var option = getEchart(xdata, returndata);
                bar.setOption(option,true);
            });
        }
        function getEchart(xdata, returndata) {
            var option = {
                legend: {
                    data:['收入']
                },
                xAxis: {
                    type: 'category',
                    data: xdata,
                    name:'日期'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    show: true // 必须引入 tooltip 组件
                },
                yAxis: {
                    type: 'value',
                    name: '金额'
                },

                toolbox: {
                    show: true,
                    right:'3%',
                    orient:'vertical',
                    feature: {
                        saveAsImage: { show: true },
                        magicType: {
                            type: ['line', 'bar'],
                        },
                        myFull: {
                            show: true,
                            title: '全屏查看',
                            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                            onclick: function (e){
                                var opts = e.getOption();
                                console.log(opts);
                                opts.toolbox[0].feature.myFull.show=false;
                                //window.top表示最顶层iframe  如果在当页面全屏打开 删去window.top即可
                                window.top.layer.open({
                                    title:false,
                                    type:1,
                                    area: ["1200px", "700px"],
                                    content:"<div class=\"fullChart\" id=\"fullChart\" style=\"height:100%;width:100%;top: 30px; \"></div>",
                                    success: function (layero, index) {
                                        $(layero).children('.layui-layer-content').css('overflow', 'visible');
                                        // echarts.dispose( window.top.document.getElementById('fullChart'));
                                        var fullchart  = echarts.init( window.top.document.getElementById('fullChart'));
                                        // fullchart.clear();
                                        fullchart.setOption(opts,true);
                                    }
                                })
                            }
                        },
                    },
                    top: 25,
                },
                series: [{
                    data: returndata,
                    type: 'line',
                    name:'收入',

                    itemStyle: {
                        color:'#ff6011',
                        normal: {
                            color:'#ff6011',
                            lineStyle:{color:'#ff6011'}
                        }
                    }
                }]
            };
            return option;
        }
    })
</script>
</body>
</html>